<template>
	<l-page class="page-card" :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form slot="header" ref="queryForm" :inline="true" :model="queryParams" label-position="left" label-width="75px">
			<el-form-item label="用户ID:" prop="userId">
				<el-input v-model.trim="queryParams.userId" clearable maxlength="6" placeholder="请输入用户ID" show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit />
			</el-form-item>
			<el-form-item label="处理状态:" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择处理状态">
					<el-option :value="null" label="全部"></el-option>
					<el-option label="已处理" value="1"></el-option>
					<el-option label="未处理" value="0"></el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="反馈时间:"></start-end-time>
			<start-end-time ref="reply" :get-time="getReplyTime" title="回复时间:"></start-end-time>
		</el-form>

		<div slot="card" class="mb-[24px] flex items-center">
			<l-statistical-card left-name="用户反馈总数" :left-value="statistics.totalCount" :right-value="statistics.todayTotalCount" />
			<l-statistical-card left-name="已处理" :left-value="statistics.alreadyCount" :right-value="statistics.todayAlreadyCount" />
			<l-statistical-card left-name="待处理" :left-value="statistics.notCount" :right-value="statistics.todayNotCount" />
		</div>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" :data="feedbackList" stripe @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" />
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="userId" min-width="156" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="156" />
			<el-table-column :formatter="emptyToString" align="center" label="反馈内容" min-width="156" prop="content" />
			<el-table-column :formatter="emptyToString" align="center" label="反馈图片" min-width="156" prop="scope">
				<template slot-scope="scope">
					<el-image
						v-if="scope.row.picUrls && scope.row.picUrls.split(',')"
						:preview-src-list="[scope.row.picUrls.split(',')[0]]"
						:src="scope.row.picUrls.split(',')[0]"
						style="width: 48px; height: 48px"
					>
						<div slot="error" class="h-full flex items-center justify-center">-</div>
					</el-image>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="回复内容" min-width="156" prop="scope">
				<template slot-scope="scope">
					{{ scope.row.reply == null ? '等待处理中' : scope.row.reply }}
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="处理状态" prop="status" min-width="156">
				<template slot-scope="scope">
					<div>{{ scope.row.status == 1 ? '已处理' : '未处理' }}</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="反馈时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="回复时间" min-width="200" prop="updateTime">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 1" class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.updateTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.updateTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" :width="tableAction" align="right" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action justify-end">
						<el-button v-if="scope.row.status === 0" v-hasPermi="['system:level:edit']" type="primary" @click="handleUpdate(scope.row)">处理 </el-button>
						<el-button v-hasPermi="['system:level:edit']" type="primary" @click="showDetails(scope.row.id)">详情 </el-button>
						<el-button v-hasPermi="['system:level:remove']" type="danger" @click="handleDelete(scope.row)">删除 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或编辑意见反馈对话框 -->
		<l-dialog v-model="open" :title="title" on-button-width="236px" close-button-width="236px" append-to-body width="853px" @close="cancel" @formClose="cancel" @formSubmit="submitForm">
			<div class="mess_box !px-0 mb-[24px]">
				<div class="title">用户信息</div>
				<el-table :data="[info]">
					<el-table-column prop="userId" label="用户ID" min-width="120" align="center"></el-table-column>
					<el-table-column prop="mobile" label="手机号码" min-width="120" align="center"></el-table-column>
					<el-table-column prop="createTime" label="反馈时间" min-width="156" align="center"></el-table-column>
				</el-table>
			</div>
			<div class="flex mb-[24px]">
				<div class="mess_box !px-0 w-[340px] mr-[20px]">
					<div class="title">反馈内容</div>
					<div class="w-full h-[123px] bg-[#F7F7F7] p-[12px] rounded-[4px]" style="border: 1px solid #e5e5e5">{{ info.content }}</div>
				</div>
				<div class="mess_box !px-0 flex-1">
					<div class="title">反馈图片</div>
					<div class="w-full">
						<div v-if="info.picUrls" class="mr-[24px] flex flex-wrap">
							<el-image
								v-for="(value, index) in info.picUrls.split(',')"
								:key="index"
								:preview-src-list="info.picUrls.split(',')"
								:src="value"
								:z-index="9999"
								style="width: 123px; height: 123px; border-radius: 8px"
							>
							</el-image>
						</div>
					</div>
				</div>
			</div>
			<div class="mess_box !px-0 mb-[24px]">
				<div class="title">回复内容</div>
				<el-form ref="form" :model="form" :rules="rules" label-width="0" :inline="true">
					<el-form-item prop="reply" class="!mr-[20px]">
						<el-input v-model.trim="form.reply" :rows="6" type="textarea" maxlength="300" show-word-limit class="!w-[340px] !max-w-[340px]" placeholder="请输入内容" />
					</el-form-item>
					<el-form-item prop="deals">
						<l-upload-image v-model="form.deals" height="123px" width="123px" :limit="9" class="w-full">
							<div class="flex flex-col items-center">
								<svg-icon icon-class="add" size="22px" color="#CCCCCC" class="mb-[6px]"></svg-icon>
								<el-tooltip effect="dark" content="图片大小建议为4M内，支持图片类 型jpj,png，最多上传9张，最少1张。" placement="top">
									<div class="text-[14px] text-[#cccccc] cursor-pointer">上传图片 <i class="el-icon-question"></i></div>
								</el-tooltip>
							</div>
						</l-upload-image>
					</el-form-item>
				</el-form>
			</div>
		</l-dialog>
		<l-dialog v-model="openDetails" :show-button="false" on-button-width="236px" close-button-width="236px" title="详情" width="853px" @close="handleClose">
			<div class="mess_box !px-0 mb-[24px]">
				<div class="title">用户信息</div>
				<el-table :data="[info]">
					<el-table-column prop="userId" label="用户ID" min-width="120" align="center"></el-table-column>
					<el-table-column prop="mobile" label="手机号码" min-width="120" align="center"></el-table-column>
					<el-table-column prop="createTime" label="反馈时间" min-width="156" align="center"></el-table-column>
				</el-table>
			</div>
			<div class="flex mb-[24px]">
				<div class="mess_box !px-0 w-[340px] mr-[20px]">
					<div class="title">反馈内容</div>
					<div class="w-full h-[123px] bg-[#F7F7F7] p-[12px] rounded-[4px]" style="border: 1px solid #e5e5e5">{{ info.content }}</div>
				</div>
				<div class="mess_box !px-0 flex-1">
					<div class="title">反馈图片</div>
					<div class="w-full">
						<div v-if="info.picUrls" class="mr-[24px] flex flex-wrap">
							<el-image
								v-for="(value, index) in info.picUrls.split(',')"
								:key="index"
								:preview-src-list="info.picUrls.split(',')"
								:src="value"
								:z-index="9999"
								style="width: 123px; height: 123px; border-radius: 8px"
							>
							</el-image>
						</div>
					</div>
				</div>
			</div>
			<div class="flex mb-[24px]">
				<div class="mess_box !px-0 w-[340px] mr-[20px]">
					<div class="title">回复内容</div>
					<div class="w-full h-[123px] bg-[#F7F7F7] p-[12px] rounded-[4px]" style="border: 1px solid #e5e5e5">{{ info.reply }}</div>
				</div>
				<div class="mess_box !px-0 flex-1">
					<div class="title">回复图片</div>
					<div class="w-full">
						<div v-if="info.deals" class="mr-[24px] flex flex-wrap">
							<el-image
								v-for="(value, index) in info.deals.split(',')"
								:key="index"
								:preview-src-list="info.deals.split(',')"
								:src="value"
								:z-index="9999"
								style="width: 123px; height: 123px; border-radius: 8px"
							>
							</el-image>
						</div>
					</div>
				</div>
			</div>
		</l-dialog>
	</l-page>
</template>

<script>
import CountTo from 'vue-count-to';

import { delFeedback, exportFeedback, getFeedback, listFeedback, queryFeedBackStatistics, updateFeedback } from '@/api/mall/feedback';
import Editor from '@/components/Editor';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';

export default {
	name: 'Feedback',
	components: {
		Editor,
		startEndTime,
		CountTo,
	},
	mixins: [tableMixins],
	data() {
		return {
			tableAction: 150,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 意见反馈表格数据
			feedbackList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			openDetails: false,
			info: {},
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				id: null,
				userId: null,
				username: null,
				mobile: null,
				feedType: null,
				content: null,
				status: null,
				hasPicture: null,
				picUrls: null,
				feedTime: [],
				replyStartTime: null,
				replyEndTime: null,
				startTime: null,
				endTime: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				deals: [{ required: true, message: '请上传图片', trigger: 'change' }],
				reply: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
			},
			statistics: {
				totalCount: 0,
				alreadyCount: 0,
				notCount: 0,
				todayTotalCount: 0,
				todayAlreadyCount: 0,
				todayNotCount: 0,
			},
		};
	},
	created() {
		this.getList();
		this.queryFeedBackStatistics();
	},
	methods: {
		queryFeedBackStatistics() {
			queryFeedBackStatistics().then((res) => {
				this.statistics = res.data;
			});
		},
		/** 搜索意见反馈列表 */
		handleClose() {
			this.openDetails = false;
		},
		getList() {
			this.loading = true;
			listFeedback(this.queryParams)
				.then((response) => {
					this.feedbackList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				userId: null,
				username: null,
				mobile: null,
				feedType: null,
				content: null,
				status: 0,
				hasPicture: null,
				picUrls: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				feedTime: [],
			};
			this.resetForm('form');
		},
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
		getReplyTime(startTime, endTime) {
			this.queryParams.replyStartTime = startTime;
			this.queryParams.replyEndTime = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.reply.resetTime();
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加意见反馈';
		},
		/** 编辑按钮操作 */
		showDetails(id) {
			getFeedback(id).then((response) => {
				this.info = response.data;
				this.openDetails = true;
			});
		},
		handleUpdate(row) {
			this.reset();
			getFeedback(row.id).then((response) => {
				this.info = response.data;
			});
			const id = row.id || this.ids;
			getFeedback(id).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '处理';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id != null) {
						updateFeedback({
							...this.form,
							deals: Array.isArray(this.form.deals) ? this.form.deals.join(',') : '',
						}).then(() => {
							this.msgSuccess('处理成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			let ids = { id: [] };
			if (row.id) ids.id.push(row.id);
			else ids.id = ids.id.concat(this.ids);
			this.$confirm('是否删除用户ID为"' + row.userId + '"的用户反馈?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delFeedback(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有意见反馈数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportFeedback(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
		handleCommand(key, row) {
			this[key](row);
		},
	},
};
</script>
<style lang="scss" scoped>
.mess_box {
	padding: 0 20px;

	.title {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 60px;
		color: #333333;
		opacity: 1;
	}

	.content {
		border: 1px dashed #e5e5e5;
		border-radius: 10px;
		// padding-bottom: 31px;
		padding: 0 20px 20px;
		color: #333333;
		margin-bottom: 22px;
		/*margin-top: 20px;*/
		.content-info {
			// display: flex;
			margin-top: 8px;

			.info2 {
				padding-left: 23px;
				position: relative;

				::after {
					content: '';
					position: absolute;
					left: 0;
					top: 20px;
					width: 1px;
					height: 30px;
					background: #cccccc;
					opacity: 1;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;
				width: 80%;

				> div {
					margin-top: 10px;
					width: 300px;
					color: #333333;
					opacity: 1;
				}

				.time {
					// margin-top:20px;
					font-size: 16px;
					color: #333333;
				}
			}
		}

		.time {
			margin-top: 15px;
			font-size: 16px;
			color: #333333;
		}
	}
}
</style>
